<template>
    <a-range-picker
      size="default"
      :placeholder="placeholder"
      :allowClear="allowClear"
      class="rangePicker"
      v-model:value="valueStr"
      @change="changeValue"
      :show-time="showTime"
      :format="format"
    >
   <template #suffixIcon>
    <span v-if="dataControlType == 'DateTimeRange_V2'" class="iconfont">
        &#xe6ca;
    </span>
    <span v-if="dataControlType == 'DateRange_V2'" class="iconfont">
        &#xe827;
      </span>
    </template>
     
      
    </a-range-picker>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "upload",
  data() {
    return {
      valueStr: [],
    };
  },
  props: {
    showTime: {
      type: Boolean,
      default: false,
    },
    start: {
      type: String,
      default: "",
    },
    end: {
      type: String,
      default: "",
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
    format: {
      type:String,
      default:'YYYY-MM-DD'
    },
    placeholder: {
      type: Array,
      default: ["开始时间", "结束时间"],
    },
    dataControlType:{
      type:String,
      default:''
    }
  },
  methods: {
    changeValue(date, string) {
      let value = [];
      if (string.length == 2 && string[0]) {
        value = string;
      } else {
        //值被清空后
        value = [];
      }
      this.$emit("changeValue", value);
    },
  },
  watch: {
    start: {
      immediate: true,
      handler(val) {
        if (val) {
         this.valueStr = [
            dayjs(this.start, this.format),
            dayjs(this.end, this.format),
          ];
        }
      },
    },
  },
};
</script>
<style scoped lang="less">
  .rangePicker{
    width:100%
  }
</style>